<template>
  <div class="eltabs">
    <el-tabs
      id="c"
      class="custom-tabs"
      v-model="activeTab"
      default-active="first"
      type="card"
      @tab-click="handleClick"
    >
      <el-tab-pane
        label="登录"
        name="first"
        style="width: 400px; height: 220px"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="90px"
          class="demo-ruleForm"
          style="margin-top: 20px"
        >
          <el-form-item label="手机号" prop="phonenumber">
            <el-input
              placeholder="请输入手机号"
              v-model="ruleForm.phonenumber"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              placeholder="请输入密码"
              type="password"
              v-model="ruleForm.password"
            ></el-input>
          </el-form-item>
          <span class="cw" style="color: red" id="error-message"></span>
          <el-form-item>
            <el-row>
              <el-col :span="12" style="text-align: right"
                ><el-button type="primary" @click="submitForm('ruleForm')"
                  >登录</el-button
                >&nbsp;&nbsp;&nbsp;&nbsp;</el-col
              >
              <el-col :span="12" style="text-align: left"
                ><el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane
        label="注册"
        name="second"
        style="width: 400px; height: 340px"
      >
        <el-form
          :model="registration"
          :rules="regrules"
          ref="registration"
          label-width="100px"
          class="demo-ruleForm"
        >
        <el-form-item label="姓名" prop="name">
            <el-input
              placeholder="请输入姓名"
              v-model="registration.name"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phonenumber">
            <el-input
              placeholder="请输入手机号"
              v-model="registration.phonenumber"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              placeholder="请输入密码"
              v-model="registration.password"
            ></el-input>
          </el-form-item>
          <el-form-item label="确定密码" prop="password1">
            <el-input
              placeholder="请再次确认密码"
              v-model="registration.password1"
            ></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="verification">
            <el-input
              style="width: 120px"
              placeholder="请输入验证码"
              v-model.number="registration.verification"
              autocomplete="off"
            ></el-input>
            <el-button
              :disabled="disabled"
              type="info"
              class="lzm"
              @click="code"
            >
              {{ buttonText }}</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="12" style="text-align: right"
                ><el-button
                  type="primary"
                  :plain="true"
                  @click="submitReg('registration')"
                  >注册</el-button
                >&nbsp;&nbsp;&nbsp;&nbsp;</el-col
              >
              <el-col :span="12" style="text-align: left">
                <el-button  @click="resetReg('registration')"
                  >重置</el-button
                >
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      buttonText: "获取验证码",
      disabled: false,
      countdown: 60,
      activeTab: "first", // 设置默认选中的标签页名称为 "first"
      verification: "",
      ruleForm: {
        phonenumber: "",
        password: "",
      },
      registration: {
        name:"",
        filenumber: "",
        verification: "",
        phonenumber: "",
        password: "",
        password1: "",
      },
      regrules: {
        verification: [
          { required: true, message: "验证码不能为空" },
          { type: "number", message: "验证码必须为数字值" },
        ],
        phonenumber: [
          { required: true, message: "手机号不为空！", trigger: "blur" },
       
          {
            validator: (rule, value, callback) => {
              this.axios.post("/rear/ca", this.registration).then((res) => {
                if (res.data) {
                  return callback(
                    new Error(
                      "该 " + this.registration.phonenumber + " 手机号已注册！"
                    )
                  );
                } else {
                  return callback();
                }
              });
            },
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "密码不能为空!", trigger: "blur" },
        ],
        password1: [
          { required: true, message: "确认密码不能为空!", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value != this.registration.password) {
                return callback(new Error("新密码和确定密码不一致!"));
              } else {
                return callback();
              }
            },
            trigger: "blur",
          },
        ],
        name: [{ required: true, message: "会员名不为空！", trigger: "blur" }],
      },
      rules: {
        phonenumber: [
          { required: true, message: "手机号不为空！", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空!", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post("/rear/login", this.ruleForm).then((res) => {
            if (res.data) {
              sessionStorage.setItem("name", JSON.stringify(res.data));
              this.$store.commit("menus", res.data);
              this.$router.replace("/home");
            } else {
              var errorMessage = "账号或密码错误";
              document.getElementById("error-message").innerText = errorMessage;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submitReg(registration) {
      this.$refs[registration].validate((valid) => {
        if (this.verification != this.registration.verification) {
          this.$message({
            message: "验证码有误",
            type: "error",
          });
        } else if (valid) {
          this.axios
            .post("/rear/registration", this.registration)
            .then((res) => {
              if (res.data) {
                this.$message({
                  message: "注册成功！",
                  type: "success",
                });
                this.registration = "";
              }
            });
        } else {
          return false;
        }
      });
    },

    code() {
      this.axios.post("/rear/verification", this.registration).then((res) => {
        this.verification = res.data.verification;
      });
      this.disabled = true;
      this.buttonText = `${this.countdown}秒后重新发送`;
      const timer = setInterval(() => {
        this.countdown--;
        if (this.countdown === 0) {
          clearInterval(timer);
          this.buttonText = "获取验证码";
          this.disabled = false;
          this.countdown = 60;
        } else {
          this.buttonText = `${this.countdown}秒后重新发送`;
        }
      }, 1000);
    },
    resetReg(registration) {
      this.$refs[registration].resetFields();
    },
    addid() {
      const currentTime = new Date().toLocaleString();
      console.log(`${currentTime}`);
      const currentDate = new Date();
      const year = currentDate.getFullYear();
      const month = currentDate.getMonth() + 1;
      const day = currentDate.getDate();
      const hour = currentDate.getHours();
      const minute = currentDate.getMinutes();
      const second = currentDate.getSeconds();
      this.registration.filenumber = `${year}${month}${day}${hour}${minute}${second}`;
    },
  },
  created() {
    this.addid();
  },
};
</script>

<style scoped>
.cw {
  padding-left: 150px;
}
.lzm {
  position: relative;
}
.cz {
  position: relative;
  right: -80px;
}
.eltabs {
  background-image: url("../assets/login.jpg");
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 300px;
  padding-bottom: 50%; /* 通过padding设置div的高度，以便保持宽高比 */
}
.custom-tabs {
  position: relative;
  top: 180px; /* 向下移动20像素 */
  left: 500px; /* 向右移动50像素 */
  background-color: #f0f0f0;
}
#c {
  position: fixed;
  top: 25%;
  left: 40%;
  width: 450px;
  background-color: #f3f3f3;
  padding: 10px;
}
</style>